<template>
  <div id="app">
    <router-view :key="$route.fullPath" />
  </div>
</template>

<script>

import { getWebSiteInfo, report } from '@/api'
import { setSkin, getSkin } from '@/utils/auth'
export default {
  name: 'App',

  data() {
    return {
    }
  },

  created() {
    report();
    getWebSiteInfo().then(res => {
      let siteCount = {
        articleCount: res.extra.articleCount,
        tagCount: res.extra.tagCount,
        categoryCount: res.extra.categoryCount,
      }
      this.$store.commit("setWebSiteInfo", res.extra.webConfig)
      this.$store.commit("setSiteCount", siteCount)
      this.$store.commit("setTagCloud", res.extra.tagCloud)
      this.$store.commit("setHotArticles", res.extra.hotArticles)
      this.$store.commit("setNewArticleList", res.extra.newArticleList)
      this.$store.commit("setNewArticleList", res.extra.newArticleList)
      this.$store.state.siteAccess = res.extra.siteAccess
      this.$store.state.visitorAccess = res.extra.visitorAccess
    })


  },
  beforeCreate() {
    if (getSkin() == null) {
      setSkin("shallow")
    } else {
      setSkin(getSkin())
    }
  },
  mounted() {
    this.$setSkin()
  },

}
</script>

<style lang="scss" scoped>
#app {
  background: var(--body-color);
}

/deep/ .el-card__body {
  padding: 0;
}

/deep/ .el-card {
  border: 0;
}


@media screen and (max-width: 1118px) {
  .dialog {
    width: 100%;

    /deep/ .el-dialog {
      width: 100% !important;
    }
  }
}


// ::-webkit-scrollbar {
//   width: 8px;
// }

// ::-webkit-scrollbar-thumb {
//   background: linear-gradient(180deg, #F0BBC3, #10A44A);
//   border-radius: 8px;
// }
</style>
